<template>
  <div class="container">
    <table>
      <tbody>
        <tr v-if="showThead" class="head">
          <td v-for="(item, index) in theadList" :key="index" style="color: #666666" :style="itemTheadStyle">
            {{ item }}
          </td>
        </tr>
        <tr v-for="(item, index) in data" :key="index">
          <td v-if="showSerialNumber">{{ index + 1 }}</td>
          <td v-for="(obj, key) in item" :key="key" :colspan="obj.colspan" :rowspan="obj.rowspan" :style="obj.style"
            @click="handleClick(obj)">
            {{ obj.val }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    showThead: {
      type: Boolean,
      default: false,
    },
    theadList: {},
    itemTheadStyle: {
      type: String,
      default: ''
    },
    showSerialNumber: {
      type: Boolean,
      default: false,
    },

    data: {
      type: Array,
      default: [],
    },
  },
  methods: {
    handleClick(data) {
      console.log(data)
      if (!data.click) return
      this.$emit(data.click, data.key);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  flex-grow: 1;
  width: 100%;
  // border-radius: 8px 8px 8px 8px;
  overflow: auto;

}

// 滚动条宽度
.container::-webkit-scrollbar {
  width: 6px;
}

// 滚动条轨道
.container::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

// 小滑块
.container::-webkit-scrollbar-thumb {
  background: #40a0ff49;
  border-radius: 10px;
}




// .container::-webkit-scrollbar {
//   scrollbar-color: #fbfbfb green;
//   // display: none;
//   /* 针对WebKit浏览器隐藏滚动条 */
// }

table {
  border-spacing: 0;
  /* 去掉单元格间隙 */
  background: rgba(255, 255, 255);
  // border-radius: 8px 8px 8px 8px;
  width: 100%;
  height: 100%;

  .head {
    position: sticky;
    top: 0;
    background: #EEEFF3;
  }

  td,
  th {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    color: #333333;
    font-size: 16px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  tr:nth-child(1) td {
    border-top: 1px solid #eee;

  }

  tr td:nth-child(1) {
    border-left: 1px solid #eee;

  }

  th {
    font-size: 16px;
    color: #666666;
  }

  .orange {
    color: #ff7830;
  }
}

/* 为每个单元格添加下边框和右边框 */
</style>
